<template>
  <div class="login_container">
    <div class="login_box">
      <div class="login_left">
        <div class="title">
          <div>欢迎进入</div>
          <div>宠物点单管理系统</div>
        </div>
      </div>
      <div class="login_right">
        <!-- 登录表单区域 -->
        <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="loginFormRules"
          class="login_form"
        >
          <div class="login_form_title"><div>账号密码登录</div></div>
          <!-- 用户名 -->
          <el-form-item prop="account">
            <el-input
              v-model="loginForm.account"
              prefix-icon="el-icon-user-solid"
              placeholder="请输入账号"
            ></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              prefix-icon="el-icon-lock"
              type="password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <!-- 按钮区域 -->
          <el-form-item class="btns">
            <el-button type="primary" @click="login">登录</el-button>
            <el-button type="info" @click="resetLoginForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 这是登录表单的数据绑定对象
      loginForm: {
        account: "", //123456
        password: "", //123456
      },
      // 这是表单的验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        account: [
          { required: true, message: "请输入登录名称", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    // 点击重置按钮，重置登录表单
    resetLoginForm() {
      console.log(this);
      this.$refs.loginFormRef.resetFields();
    },
    login() {
      this.$refs.loginFormRef.validate(async (valid) => {
        console.log("valid:" + valid);
        if (valid) {
          console.log("登录");
          const { data: res } = await this.$http.post(
            "login/login",
            this.loginForm
          );
          if (res.code !== 200) {
            return this.$message.error("登录失败！");
          }
          window.localStorage.setItem("token", res.data.token);
          window.localStorage.setItem("admin", res.data.admin);
          if(res.data.admin == 1){
            window.localStorage.setItem("activePath", "/report");
            this.$router.push("/report");
          }else{
            window.localStorage.setItem("activePath", "/order");
            this.$router.push("/order");
          }
          
        } else {
          console.log("表单问题");
          return;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login_container {
  // background-color: #2b4b6b;
  // background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
  background-image: url('../assets/1.jpg');
  height: 100%;
}

.title {
  font-size: 30px;
  color: white;
}
.login_box {
  width: 800px;
  height: 450px;
  background-color: #0000009f;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  .login_left {
    width: 370px;
    height: 450px;
    border-radius: 10px 0px 0px 10px;

    // background-color: aquamarine;
    // background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
    // background-image: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%);
    display: flex;
    justify-content: center;
    .title {
      margin-top: 120px;
      text-align: left;
      font-size: 28px;
      letter-spacing: 2px;
      div{
        margin-bottom: 20px;
      }
    }
  }
  .login_right {
    width: 530px;
    height: 450px;
    background-color: white;
    .login_form {
      position: absolute;
      bottom: 0;
      width: 400px;
      padding: 0 20px;
      box-sizing: border-box;
      top: 50%;
      left: 50%;
      transform: translate(-10%, -50%);
      .login_form_title {
        text-align: left;
        border-bottom: 1px solid rgba(206, 206, 206, 0.671);
        margin-bottom: 20px;
        div {
          display: inline-block;
          padding-bottom: 15px;
          border-bottom: 1px solid #0b85ff;
          color: #0b85ff;
          font-size: 18px;
        }
      }
    }
  }
}

.btns {
  display: flex;
  justify-content: flex-end;
}
</style>